<template>
  <div class="listen">
    <div class="listen-bgc"></div>
    <div class="listen-mask"></div>
    <div class="header-mask"></div>
    <div class="header">
      <div class="header-left">
        <div class="header-img">
          <img
            :src="`${
              listenSong?.al?.picUrl ||
              'http://p2.music.126.net/x8NrNVPv7nkcd4k7OfQxxQ==/109951166669398618.jpg'
            }?imageView=1&type=webp&thumbnail=85x0`"
            alt=""
          />
        </div>
        <div class="header-text">你知道这首歌居然被这么评论？</div>
      </div>
      <div class="header-btn">
        <span>打开看看</span>
        <div class="btn-img">
          <img
            src=""
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="corona">
      <div class="handle"></div>
      <div class="disc">
        <div class="disc-in" @click.stop="listenSongHandler" ref="listenbtn">
          <div class="play-img">
            <img v-if="isStop" 
              src=""
              alt=""
            />
          </div>
          <div class="disc-in-show" :class="{stopAnimation:isStop}" ref="descinshow">
            <img
              :src="`${
                listenSong?.al?.picUrl ||
                'http://p2.music.126.net/x8NrNVPv7nkcd4k7OfQxxQ==/109951166669398618.jpg'
              }?imageView&thumbnail=360y360&quality=75&tostatic=0`"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <div class="song-info">
      <div class="title">
        {{ listenSong?.name }} - {{ listenSong?.ar[0]?.name }}
      </div>
      <div class="show-info-detail" @click.stop="showLyricsDetail(0)">
        <div :style="`top:${offsetHeight || 0}`" ref="alllyric">
          <div
            class="my-text lyrics"
            v-for="(lyricItem,index) in lyric"
            :key="lyricItem.time+index"
          >
            {{ lyricItem.text }}
          </div>
        </div>
      </div>
      <div class="together-listen">
        <div class="together-listen-left"></div>
        <div>一起听歌</div>
        <div class="together-listen-img">
          <img
            src=""
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-first">
        <!-- <div class="footer-open">{{ currentTime&&!isStop?currentTime:0 }}</div>
        <div class="footer-download">{{ duration&&!isStop?duration:0 }}</div> -->
        <div class="footer-open">打开</div>
        <div class="footer-download">关闭</div>
      </div>
    </div>
    <div class="footer-mask"></div>
    <div class="playlist-component">
      <div class="pc-header" @click="showCommentHandle('block')">
        <div class="pc-first"></div>
        <div class="pc-nav">
          <div class="nav-item" :class="active == 1 ? 'active' : ''">
            相关歌单
          </div>
          <div class="nav-item" :class="active == 2 ? 'active' : ''">
            相似歌曲
          </div>
          <div class="nav-item" :class="active == 3 ? 'active' : ''">
            精彩评论
          </div>
        </div>
      </div>
    </div>
    <div class="playlist-component playlist-comment-sec" ref="comments">
      <div class="pc-header">
        <div class="pc-first"></div>
        <div class="pc-close" @click="showCommentHandle('none')"></div>
        <div class="pc-nav">
          <div class="nav-item" :class="active == 1 ? 'active' : ''">
            相关歌单
          </div>
          <div class="nav-item" :class="active == 2 ? 'active' : ''">
            相似歌曲
          </div>
          <div class="nav-item" :class="active == 3 ? 'active' : ''">
            精彩评论
          </div>
        </div>
      </div>
      <div class="pc-content">
        <p class="pc-title">包含这首歌的歌单</p>
        <div class="songs-list">
          <div class="songs-list-item">
            <div class="sli-img">
              <img
                src="http://p1.music.126.net/yBlaq0nnVXrBH_6IAFnQ5g==/109951166650835199.jpg?imageView=1&type=webp&thumbnail=247x0"
                alt=""
              />
            </div>
            <div class="my-text sli-des">It's Christmas baby / 持更-2022</div>
            <div class="my-text sli-creator">by Easyylifeee</div>
          </div>
          <div class="songs-list-item">
            <div class="sli-img">
              <img
                src="http://p1.music.126.net/yBlaq0nnVXrBH_6IAFnQ5g==/109951166650835199.jpg?imageView=1&type=webp&thumbnail=247x0"
                alt=""
              />
            </div>
            <div class="my-text sli-des">It's Christmas baby / 持更-2022</div>
            <div class="my-text sli-creator">by Easyylifeee</div>
          </div>
          <div class="songs-list-item">
            <div class="sli-img">
              <img
                src="http://p1.music.126.net/yBlaq0nnVXrBH_6IAFnQ5g==/109951166650835199.jpg?imageView=1&type=webp&thumbnail=247x0"
                alt=""
              />
            </div>
            <div class="my-text sli-des">It's Christmas baby / 持更-2022</div>
            <div class="my-text sli-creator">by Easyylifeee</div>
          </div>
        </div>
        <p class="pc-title" v-if="playlists">喜欢这首歌的人也听</p>
        <div v-if="playlists">
          <ListComponent
            v-for="(listItem, index) in playlists"
            :key="listItem.id"
            :listItem="listItem"
            :index="index + 1"
            :showTitle="showTitle"
            :isStop="$attrs.isStop"
          />
        </div>
        <p class="pc-title" v-if="comments">精彩评论</p>
        <div class="pc-comments" v-if="comments">
          <CommentComponent
            v-for="commentItem in comments"
            :key="commentItem.commentId"
            :commentItem="commentItem"
          />
        </div>
      </div>
    </div>
    <div class="lyrics-detail" ref="lyricsdetail">
      <LyricsComponent @showMe="showLyricsDetail" :listenSong="listenSong" :currentTime="currentTime" :lyric="lyric" :isStop="isStop"/>
    </div>
  </div>
</template>

<script>
import CommentComponent from "@/components/CommentComponent.vue";
import ListComponent from "@/components/ListComponent.vue";
import LyricsComponent from "@/components/LyricsComponent"
export default {
  name: "ListenView",
  components: {
    CommentComponent,
    ListComponent,
    LyricsComponent
  },
  props: {
    currentTime: {
      type: Number,
      default: 0,
    },
    duration: {
      type: Number,
      default: 0,
    },
    remake:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      lyric: null,
      listenSong: null,
      comments: null,
      id: -1,
      active: 0,
      playlists: null,
      showTitle: true,
      isStop: true,
      offsetHeight: 0,
    };
  },
  watch: {
    id: {
      handler() {
        this.getDetail();
      },
      deep: true,
    },
    currentTime(val) {
      if (!this.lyric||this.isStop) return;
      let index = 0;
      let sum = this.lyric.reduce((pre, item, i) => {
        if (val >= item.time) {
          pre = (pre * 100 + 0.35 * 100) / 100;
          index = i;
        }
        return pre;
      }, 0);
      this.offsetHeight = -sum + 0.7 + "rem";
      for (let i = 0; i < this.$refs.alllyric.children.length; i++) {
        this.$refs.alllyric.children[i].classList.remove("active");
      }
      this.$refs.alllyric.children[index].classList.add("active");
    },
  },
  methods: {
    async getDetail() {
      let result = await this.axios.get(
        `/song/detail?ids=${this.$route.query.id}`
      );
      if (result.status == 200) {
        let { songs } = result.data;
        this.listenSong = songs[0];
        if(this.listenSong.id==this.id&&this.remake==false)this.$refs.listenbtn.click();
      }
      this.axios.get(`/lyric?id=${this.$route.query.id}`).then((res) => {
        let { lyric } = res.data.lrc;
        this.lyric = lyric
          .split(/\n\r?/)
          .filter((item) => item)
          .map((item) => {
            let cat = item.match(
              /\[(?<m>[0-9]+):(?<s>[0-9.]+)\](?<text>.*)/
            ).groups;
            return {
              time: (Number(cat.m) * 60 * 100 + Number(cat.s) * 100) / 100,
              text: cat.text,
            };
          });
      });
    },
    showCommentHandle(value) {
      if (value == "none") {
        this.$refs.comments.style.animation = "commentsOut 0.3s linear";
        setTimeout(() => {
          this.$refs.comments.style.display = value;
        }, 300);
        return;
      } else {
        this.$refs.comments.style.display = value;
        this.$refs.comments.style.animation = "commentsIn 0.3s linear";
        setTimeout(() => {
          this.$refs.comments.style.top = "0.6rem";
        }, 300);
      }
    },
    async getNavDetail() {
      let result = await this.axios.get(
        `/comment/music?id=${this.id}&limit=10`
      );
      if (result.status == 200) {
        let { comments } = result.data;
        this.comments = comments;
      }
      //获取相似歌单
      let resultPlay = await this.axios.get(`/related/playlist?id=${this.id}`);
      console.log(resultPlay);
    },
    listenSongHandler() {
      this.isStop = !this.isStop;
      localStorage.setItem("songId", this.listenSong.id);
      localStorage.setItem("listItem", JSON.stringify(this.listenSong));
      this.$emit("getStatusFromListen", { isStop: this.isStop });
    },
    showLyricsDetail(val){
      this.$refs.lyricsdetail.style.left = val;
    }
  },
  created() {
    this.id = Number.parseInt(this.$route.query.id);
    this.getNavDetail();
  },
};
</script>

<style lang="scss" scoped>
.active {
  color: #ff3a3a !important;
  border-bottom-color: #ff3a3a !important;
}
.listen {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  left: 0;
  top: 0;
  z-index: 20;
}
.listen-bgc {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(http://p1.music.126.net/SEEsJMMJMErXDnBj74f2vA==/109951168069681144.jpg?imageView&thumbnail=50y50&quality=15&tostatic=0);
  transform: scale(1.5);
  transform-origin: center center;
  filter: blur(30px);
  background-color: #161824;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  transform: scale(1.5);
  left: 0;
  top: 0;
  z-index: 1;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000, $alpha: 0.5);
  }
}
.listen-mask {
  position: absolute;
  width: 100%;
  height: 4rem;
  left: 0;
  top: 0.5rem;
  background-color: red;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.5),
    rgba(72, 76, 83, 1),
    black,
    black
  );
  opacity: 0.7;
  z-index: 1;
}
.header-mask {
  position: relative;
  width: 100%;
  height: 0.98rem;
  z-index: 2;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.header {
  position: relative;
  color: #fff;
  width: 100%;
  font-size: 0.13rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0.09rem 0.11rem 0.1rem 0.13rem;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  .header-left {
    display: flex;
    .header-img {
      width: 0.28rem;
      height: 0.28rem;
      border-radius: 50%;
      overflow: hidden;
    }
    .header-text {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 0.1rem;
    }
  }
  .header-btn {
    width: 0.9rem;
    height: 0.3rem;
    border: 0.01rem solid rgba($color: #ccc, $alpha: 1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.15rem;
    .btn-img {
      width: 0.06rem;
      height: 0.11rem;
      margin-left: 0.04rem;
      margin-top: 0.01rem;
    }
  }
}
.corona {
  position: relative;
  top: -0.3rem;
  z-index: 1;
  width: 2.47rem;
  height: 2.47rem;
  margin: 0 auto;
  .handle {
    position: absolute;
    width: 0.73rem;
    height: 1.18rem;
    background-image: url(@/../public/images/needle-ab.png);
    background-size: cover;
    background-repeat: no-repeat;
    left: 1.1rem;
    top: -0.5rem;
    transform-origin: 0 0 0;
    transform: rotate(-8deg);
    z-index: 100;
  }
  .disc {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    background-color: rgba($color: #ccc, $alpha: 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    .disc-in {
      position: relative;
      width: 93%;
      height: 93%;
      background-color: #000;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      .play-img {
        position: absolute;
        width: 0.56rem;
        height: 0.56rem;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
      }
      .disc-in-show {
        position: relative;
        width: 70%;
        height: 70%;
        background-color: #fff;
        border-radius: 50%;
        overflow: hidden;
        animation: turn-around 30s linear infinite;
      }
      .stopAnimation{
        animation-play-state: paused;
      }
    }
  }
}
.song-info {
  position: relative;
  z-index: 100;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.35rem;
  font-size: 0.16rem;
  text-align: center;
  overflow: hidden;
  .show-info-detail {
    position: relative;
    height: 0.7rem;
    width: 100%;
    font-size: 0.16rem;
    margin-bottom: 0;
    overflow: hidden;
    > div {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 0.7rem;
      transition: 0.3s;
      .active {
        color: #ff3a3a;
      }
      > div {
        height: 0.25rem;
        line-height: 0.25rem;
        font-size: 0.16rem;
        text-align: center;
        margin-bottom: 0.1rem;
      }
    }
  }
  .together-listen {
    width: 1.26rem;
    height: 0.3rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.14rem;
    .together-listen-left {
      width: 0.2rem;
      height: 0.2rem;
      margin-right: 0.04rem;
      background-image: url(https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/10958309011/6b24/2279/c945/438870d95af399eedec241ec6de097b1.png);
      background-size: cover;
    }
    .together-listen-img {
      margin-left: 0.04rem;
      width: 0.15rem;
      height: 0.15rem;
    }
  }
  > div {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-bottom: 0.1rem;
  }
  .title {
    font-size: 0.18rem;
    margin-bottom: 0.15rem;
  }
}
.footer {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 0.5rem;
  .footer-first {
    width: 100%;
    height: 0.42rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    font-size: 0.18rem;
    > div {
      width: 1.74rem;
      height: 100%;
      border-radius: 0.21rem;
      box-sizing: border-box;
      border: 0.01rem solid rgb(255, 58, 58);
      color: rgb(255, 58, 58);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .footer-download {
      background-color: #ff3a3a;
      color: #fff;
    }
  }
}
.footer-mask {
  position: absolute;
  width: 100%;
  height: 2rem;
  background-color: rgba($color: #000000, $alpha: 0.8);
  box-shadow: 0px -0.34rem 0.4rem 0.34rem rgba(0, 0, 0, 0.8);
  left: 0;
  bottom: 0;
  z-index: 1;
}
.playlist-component {
  position: absolute;
  width: 100%;
  height: 0.6rem;
  top: calc(100vh - 0.6rem);
  left: 0;
  background: rgba(255, 255, 255, 0.1);
  z-index: 20;
  border-radius: 0.3rem 0.3rem 0 0;
  color: rgba($color: #fff, $alpha: 0.2);
  .pc-header {
    position: relative;
    width: 100%;
    height: 0.6rem;
    .pc-first {
      position: absolute;
      background: hsla(0, 0%, 100%, 0.1);
      width: 0.54rem;
      height: 0.05rem;
      transform: translateX(-50%);
      left: 50%;
      top: 0.08rem;
      border-radius: 0.05rem;
    }
    .pc-nav {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 0.3rem;
      display: flex;
      justify-content: space-evenly;
      .nav-item {
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 0.02rem solid transparent;
      }
    }
  }
}
.playlist-comment-sec {
  display: none;
  z-index: 2000;
  top: calc(100vh - 0.6rem);
  background-color: #fff;
  color: #000;
  height: calc(100vh - 0.6rem);
  animation: commentsIn 0.5s linear;
  .pc-header {
    .pc-first {
      background-color: #ccc;
    }
    .pc-close{
      position: absolute;
      width: 100%;
      height: 0.25rem;
      background-color: transparent;
      left: 0;
      top: 0;
    }
  }
  .pc-content {
    width: 100%;
    height: calc(100vh - 1.2rem);
    box-sizing: border-box;
    padding: 0 0.16rem;
    padding-top: 0.05rem;
    overflow: scroll;
    .pc-title {
      color: #333;
      font-size: 0.17rem;
      font-weight: bold;
    }
    > div {
      margin: 0.12rem 0;
    }
    .songs-list {
      height: 1.5rem;
      display: flex;
      justify-content: space-between;
      .songs-list-item {
        flex: 1;
        height: 1.5rem;
        margin-left: 0.1rem;
        font-size: 0.12rem;
        color: #333;
        &:nth-child(1) {
          margin-left: 0;
        }
        .sli-img {
          width: 100%;
          border-radius: 0.04rem;
          overflow: hidden;
        }
        .sli-des {
          font-size: 0.13rem;
          margin-top: 0.04rem;
        }
        .sli-creator {
          color: #999;
          margin-top: 0.04rem;
        }
      }
    }
  }
}
.lyrics-detail{
  position: absolute;
  left: 105vw;
  top: 0;
  z-index: 1000;
  transition: 0.5s;
}
</style>